<template>
  <list-frame :show-advance-query="false" :total="count" :table-data="productPartList" :columns="columns"
    @page-changed="pageChanged" @size-changed="sizeChanged" @query="query">
    <template #base>
      <el-select @change="onProductSelected" v-model="queryProductCode" placeholder="选择产品"
        style="width: 120px;margin-left: 4px;" clearable>
        <el-option v-for="product in productList" :key="product.code" :label="product.name"
          :value="product.code"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button type="primary" color="#626aef" @click="onCreate">添加配件</el-button>
      <create-view :data="currentProductPart" :visible="popupVisible" :product-code="queryProductCode"
        :product-name="queryProductName" @close="onClose"></create-view>
    </template>
    <template #operations="row">
      <el-button link type="primary" size="default" @click="onUpdate(row)">编辑</el-button>
      <el-button link type="danger" size="default" @click="onDelete(row)">删除</el-button>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ApiTree from '@/server/api-tree';
import type { ProductVO } from '@/server/product/types';
import type { ProductPartVO } from '@/server/productPart/types';
import { onMounted, ref } from 'vue';
import CreateView from './CreateView.vue';
import ElConfirm from '@/components/ElConfirm';
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "productName", colName: "产品名称", width: 0 },
  { prop: "partName", colName: "配件名称", width: 0 },
  { prop: "price", colName: "费用", width: 0 },
  { prop: "cuser", colName: "创建人", width: 0 },
  { prop: "ctime", colName: "创建时间", width: 0 },
]);

/** 查询列表 */
const queryProductCode = ref("");
const queryProductName = ref("");

const onProductSelected = (value: string) => {
  queryProductName.value = productList.value.find(x => x.code === value)?.name ?? "";
  getProductPartList();
}

const count = ref(0)
const productPartList = ref<ProductPartVO[]>([])
const getProductPartList = async () => {
  const { data, totalCount } = await ApiTree.productPart.list(queryProductCode.value);
  if (data) {
    productPartList.value = data;
    count.value = totalCount;
  }
}

const pageChanged = () => {
}
const sizeChanged = () => {
}
const query = () => {
  getProductPartList();
}
/** 获取产品列表 */
const productList = ref<ProductVO[]>([])
const getProductList = async () => {
  const { data } = await ApiTree.product.list();
  if (data) {
    productList.value = data;
    queryProductCode.value = data[0]?.code ?? "";
    queryProductName.value = data[0]?.name ?? "";
    getProductPartList();
  }
}
/** 添加配件/修改配件 */
const popupVisible = ref(false)
const currentProductPart = ref<ProductPartVO | null>(null);
const onCreate = () => {
  currentProductPart.value = null;
  popupVisible.value = true;
}
const onUpdate = (row: { value: ProductPartVO }) => {
  currentProductPart.value = row.value;
  popupVisible.value = true;
}
const onClose = (success: boolean) => {
  if (success) {
    getProductPartList();
  }
  popupVisible.value = false;
}
/** 删除配件信息 */
const onDelete = (row: { value: ProductPartVO }) => {
  const data = row.value;
  ElConfirm(`确定要删除配件${data.partName}吗？`).then(async () => {
    const { success } = await ApiTree.productPart.delete(data.guid);
    if (success) {
      getProductPartList();
    }
  }).catch();
}
onMounted(() => {
  getProductList();
})
</script>
<style lang="scss" scope></style>
